<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="apple-touch-icon" sizes="76x76" href="/static/image/logo.png">
    <link rel="icon" type="image/png" href="/static/image/logo.png">
    <title>
        ADMIN
    </title>
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
    <!-- Nucleo Icons -->
    <link href="/static/assets/css/nucleo-icons.css" rel="stylesheet" />
    <link href="/static/assets/css/nucleo-svg.css" rel="stylesheet" />
    <!-- Font Awesome Icons -->
    <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
    <!-- CSS Files -->
    <link id="pagestyle" href="/static/assets/css/material-dashboard.css?v=3.0.0" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/static/assets/css/ele-index.css">
    <link rel="stylesheet" type="text/css" href="/static/my_icon/iconfont.css">
    <style>
        [v-cloak] {
            display: none
        }
    </style>
</head>

<body class="g-sidenav-show bg-gray-200">
    {% verbatim myblock %}
    <div id="app" v-cloak>
        <!-- 侧边栏 -->
        <aside
            class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3   bg-gradient-dark"
            id="sidenav-main">
            <div class="sidenav-header">
                <i class="fas fa-times p-3 cursor-pointer text-white opacity-5 position-absolute end-0 top-0 d-none d-xl-none"
                    aria-hidden="true" id="iconSidenav"></i>
                <a class="navbar-brand m-0" href="#" v-if="nick_name === '_'">
                    <img src="/static/image/logo.png" class="navbar-brand-img h-100" alt="main_logo">
                    <span class="ms-1 font-weight-bold text-white">Black White Site</span>
                </a>
                <a class="navbar-brand m-0" href="/pages/personalPage.html" v-if="nick_name !== '_'">
                    <img :src="user_avatar" class="navbar-brand-img h-100" alt="main_logo">
                    <span class="ms-1 font-weight-bold text-white">您好 {{ nick_name}}</span>
                </a>
            </div>
            <hr class="horizontal light mt-0 mb-2">
            <div class="collapse navbar-collapse  w-auto  max-height-vh-100" id="sidenav-collapse-main">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link text-white bg-gradient-primary" href="#" onclick="toggleSidenav()"
                            style="background: black !important;">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">close</i>
                            </div>
                            <span class="nav-link-text ms-1">关闭侧边栏</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="/pages/homePage.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">home</i>
                            </div>
                            <span class="nav-link-text ms-1">社区·圈子</span>
                        </a>
                    </li>
                    <li class="nav-item mt-3">
                        <h6 class="ps-4 ms-2 text-uppercase text-xs text-white font-weight-bolder opacity-8">My Space
                        </h6>
                    </li>
                    <li class="nav-item" v-if="nick_name !== '_'">
                        <a class="nav-link text-white " href="/pages/personalPage.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">person</i>
                            </div>
                            <span class="nav-link-text ms-1">我的主页</span>
                        </a>
                    </li>
                    <li class="nav-item" v-if="nick_name !== '_'">
                        <a class="nav-link text-white active bg-gradient-primary" href="#" onclick="toggleSidenav()">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="fa fa-bandcamp" aria-hidden="true"></i>
                            </div>
                            <span class="nav-link-text ms-1">新建文章</span>
                        </a>
                    </li>
                    <li class="nav-item" id="login_aside" v-if="nick_name === '_'">
                        <a class="nav-link text-white " href="/pages/sign-in.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">login</i>
                            </div>
                            <span class="nav-link-text ms-1">登录</span>
                        </a>
                    </li>
                    <li class="nav-item" id="register_aside" v-if="nick_name === '_'">
                        <a class="nav-link text-white " href="/pages/sign-up.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">assignment</i>
                            </div>
                            <span class="nav-link-text ms-1">注册</span>
                        </a>
                    </li>
                    <li class="nav-item" id="logout_aside" v-if="nick_name !== '_'">
                        <a class="nav-link text-white " href="#" @click="logout">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <!-- <i class="material-icons opacity-10">assignment</i> -->
                                <i class="ni ni-user-run"></i>
                            </div>
                            <span class="nav-link-text ms-1">退出登录</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sidenav-footer position-absolute w-100 bottom-0 ">
                <div class="mx-3">
                    <div class="copyright text-center text-sm text-muted text-lg-start">
                        ©
                        <script>
                            document.write(new Date().getFullYear())
                        </script>,
                        made with <i class="fa fa-heart"></i> by
                        <a href="https://www.creative-tim.com" class="font-weight-bold" target="_blank">Candyeel</a>
                    </div>
                </div>
            </div>
        </aside>
        <!-- 显示区 -->
        <div class="main-content position-relative bg-gray-100 max-height-vh-100 h-100">
            <!-- Navbar 头部 -->
            <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
                navbar-scroll="true">
                <div class="container-fluid py-1 px-3">
                    <!-- 头部左侧 -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
                            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark"
                                    href="javascript:;">Pages</a></li>
                            <li class="breadcrumb-item text-sm text-dark active" aria-current="page">管理页面</li>
                        </ol>
                        <h6 class="font-weight-bolder mb-0">管理页面-{{mode==='user' ? "用户管理" : "文章管理"}}</h6>
                    </nav>
                    <!-- 头部右侧 -->
                    <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                        <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                            <div class="input-group input-group-outline">
                                <label class="form-label">Type here search</label>
                                <input type="text" class="form-control" disabled>
                            </div>
                        </div>
                        <ul class="navbar-nav  justify-content-end" id="right_ul">
                            <li class="nav-item d-flex align-items-center">
                                <a href="/pages/sign-in.html" class="nav-link text-body font-weight-bold px-0"
                                    v-if="nick_name === '_'">
                                    <i class="fa fa-user me-sm-1"></i>
                                    <span class="d-sm-inline d-none">登录/注册</span>
                                </a>
                            </li>
                            <!-- 侧边栏显示与否 -->
                            <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                                <a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
                                    <div class="sidenav-toggler-inner">
                                        <i class="sidenav-toggler-line"></i>
                                        <i class="sidenav-toggler-line"></i>
                                        <i class="sidenav-toggler-line"></i>
                                    </div>
                                </a>
                            </li>
                            <li class="nav-item px-3 d-flex align-items-center">
                                <a href="javascript:;" class="nav-link text-body p-0">
                                    <!-- 展示关键 fixed-plugin-button-nav -->
                                    <i class="fa fa-cog fixed-plugin-button-nav cursor-pointer"></i>
                                </a>
                            </li>
                            <li class="nav-item dropdown pe-2 d-flex align-items-center">
                                <a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fa fa-bell cursor-pointer"></i>
                                </a>
                                <ul class="dropdown-menu  dropdown-menu-end  px-2 py-3 me-sm-n4"
                                    aria-labelledby="dropdownMenuButton">
                                    <li class="mb-2">
                                        <a class="dropdown-item border-radius-md" href="javascript:;">
                                            <div class="d-flex py-1">
                                                <div class="my-auto">
                                                    <img src="/static/assets/img/team-2.jpg"
                                                        class="avatar avatar-sm  me-3 ">
                                                </div>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="text-sm font-weight-normal mb-1">
                                                        <span class="font-weight-bold">New message</span> from Laur
                                                    </h6>
                                                    <p class="text-xs text-secondary mb-0">
                                                        <i class="fa fa-clock me-1"></i>
                                                        13 minutes ago
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="mb-2">
                                        <a class="dropdown-item border-radius-md" href="javascript:;">
                                            <div class="d-flex py-1">
                                                <div class="my-auto">
                                                    <img src="/static/assets/img/small-logos/logo-spotify.svg"
                                                        class="avatar avatar-sm bg-gradient-dark  me-3 ">
                                                </div>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="text-sm font-weight-normal mb-1">
                                                        <span class="font-weight-bold">New album</span> by Travis Scott
                                                    </h6>
                                                    <p class="text-xs text-secondary mb-0">
                                                        <i class="fa fa-clock me-1"></i>
                                                        1 day
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- End Navbar -->
            <!-- 正式内容开始 -->
            <div class="container-fluid px-2 px-md-4" v-loading="loading">
                <div style="display: flex; flex-direction: row; margin-bottom: 10px;">
                    <div>
                        <el-radio-group v-model="mode" @change="change_mode" style="display: flex;">
                            <el-radio-button label="user">用户管理</el-radio-button>
                            <el-radio-button label="article">文章管理</el-radio-button>
                        </el-radio-group>
                    </div>
                    <el-input placeholder="查文章 (标题 内容 分类 标签)" style="margin-left: 20px; height: 40px;"
                        v-model="searchThing_article" @keyup.enter.native="search_something" class="input-with-select"  v-if="mode!=='user'">
                        <el-select v-model="select_mode" slot="prepend" placeholder="请选择" style="width: 120px;">
                            <el-option label="文章标题" value="1"></el-option>
                            <el-option label="文章作者" value="2"></el-option>
                            <el-option label="文章内容" value="3"></el-option>
                            <el-option label="文章标签" value="4"></el-option>
                            <el-option label="审核状态" value="5"></el-option>
                            <el-option label="审核-1: 驳回" value="6" disabled></el-option>
                            <el-option label="审核 0: 待审核" value="7" disabled></el-option>
                            <el-option label="审核 1: 通过" value="8" disabled></el-option>
                        </el-select>
                    </el-input>
                    <el-input placeholder="查作者" style="margin-left: 20px; height: 40px;"
                        v-model="searchThing_user" @keyup.enter.native="search_something" class="input-with-select"  v-if="mode==='user'">
                        <el-select v-model="select_mode_user" slot="prepend" placeholder="请选择" style="width: 120px;">
                            <el-option label="昵称" value="1"></el-option>
                            <el-option label="邮箱" value="2"></el-option>
                            <el-option label="介绍" value="3"></el-option>
                        </el-select>
                    </el-input>
                        
                </div>
                <!-- 文章管理 -->
                <el-table :data="tableData" border style="width: 100%;" max-height="1000" tooltip-effect="dark"
                    v-if="mode!=='user'" key="one">
                    <el-table-column fixed prop="title" label="标题" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="nick_name" label="作者" width="100" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" round @click="have_user(scope.row.nick_name)">{{scope.row.nick_name}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="head_avatar" label="封面" width="140">
                        <template slot-scope="scope">
                            <div style="text-align: center;">
                                <el-image style="width: 100px; height: 100px" :src="scope.row.head_avatar" fit="fill">
                                </el-image>
                                <el-button type="warning" size="mini" @click="change_article_avatar(scope.row, scope.$index)" v-if="scope.row.head_avatar!=='/static/image/default.jpg'">置为默认封面</el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="文本内容" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="tags" label="文章标签" width="120">
                        <template slot-scope="scope">
                            <div style="display: flex; flex-direction: column;">
                                <el-tag v-for="(d, i) in scope.row.tags" disable-transitions
                                    style="margin-bottom: 2px;">{{d}}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="add_time" label="初次提交时间" width="120">
                    </el-table-column> -->
                    <el-table-column prop="change_time" label="最近修改时间" width="150">
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 10px">{{ scope.row.change_time }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="is_check" label="审核状态" width="200">
                        <template slot-scope="scope">
                            <div style="display: flex; flex-direction: row;">
                                <i style="font-size: 40px;" class="el-icon-shenhezhong"
                                    v-if="scope.row.is_check===0"></i>
                                <i style="font-size: 40px;" class="el-icon-butongguo"
                                    v-if="scope.row.is_check===-1"></i>
                                <i style="font-size: 40px;" class="el-icon-shenqingchenggong"
                                    v-if="scope.row.is_check===1"></i>
                                <el-select v-model="scope.row.is_check" placeholder="请选择" style="margin-left: 5px;"
                                    @change="check_status(scope.row, scope.$index)"
                                    @visible-change="cache_check_func($event, scope.row)">
                                    <el-option v-for="item in check_options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column prop="is_delete" label="是否删除" width="100">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.is_delete === 1 ? 'danger' : 'success'" disable-transitions>
                                {{scope.row.is_delete === 1 ? "已删除" : "未删除"}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="is_recommend" label="是否推荐" width="100">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.is_recommend" active-color="#13ce66" inactive-color="#ff4949" @change="recommend_status(scope.row, scope.$index)">
                            </el-switch>
                        </template>

                    </el-table-column>
                    <el-table-column prop="recommend" label="推荐等级" width="120">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.recommend" placeholder="请选择" @change="recommend_level(scope.row, scope.$index)">
                                <el-option v-for="item in recommend_options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="goCheckDetail(scope.row.aid, scope.row.mode)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">屏蔽</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 用户部分 -->
                <el-table :data="user_tableData" border style="width: 100%;" max-height="1000" tooltip-effect="dark"
                    v-if="mode==='user'" key="two">
                    <el-table-column fixed prop="nick_name" label="用户" width="100" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button size="mini"  type="primary" round @click="have_article(scope.row.nick_name)">{{scope.row.nick_name}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="email" label="邮箱" width="200" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="avatar" label="头像" width="140">
                        <template slot-scope="scope">
                            <div style="text-align: center;">
                                <el-image style="width: 100px; height: 100px" :src="scope.row.avatar" fit="fill">
                                </el-image>
                                <el-button type="warning" size="mini" @click="change_user_avatar(scope.row, scope.$index)"  v-if="scope.row.avatar!=='/static/image/default.jpg'">置为默认头像</el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="info" label="自我介绍" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="register_time" label="注册时间" width="140">
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 10px">{{ scope.row.register_time }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="last_login_time" label="最近登录时间" width="140">
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 10px">{{ scope.row.last_login_time }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="role" label="拥有角色" width="100">
                    </el-table-column>
                    <el-table-column prop="article_no" label="文章数" width="120">
                    </el-table-column>
                    <el-table-column prop="level" label="用户等级" width="100">
                        <template slot-scope="scope">
                            <el-tag disable-transitions type="info" effect="dark"> Level {{scope.row.level}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tags" label="用户标签" width="100">
                        <template slot-scope="scope">
                            <el-tag v-for="(d, i) in scope.row.tags" disable-transitions>
                                {{d}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="is_delete" label="是否注销" width="100">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.is_delete === 1 ? 'danger' : 'success'" disable-transitions effect="dark">
                                {{scope.row.is_delete === 1 ? "已注销" : "使用中"}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="is_valid" label="是否禁用" width="100">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.is_valid" active-color="#13ce66" inactive-color="#ff4949" @change="user_valid(scope.row, scope.$index)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="send_message(scope.row, scope.$index)" type="text" size="small">留言</el-button>
                            <el-button @click="send_email(scope.row, scope.$index)" type="text" size="small">发邮件</el-button>
                            <!-- <el-button @click="have_article(scope.row.nick_name)" type="text" size="small">ta的文章</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div style="text-align: center; margin-top: 10px;">
                    <el-button size="large" v-if="next !== null" @click="load_more">加载更多</el-button>
                </div>
            </div>
            <!-- 正式内容结束 -->
            <!-- 页脚开始 -->
            <footer class="footer py-4  ">
                <div class="container-fluid">
                    <div class="row align-items-center justify-content-lg-between">
                        <div class="col-lg-6 mb-lg-0 mb-4">
                            <div class="copyright text-center text-sm text-muted text-lg-start">
                                ©
                                <script>
                                    document.write(new Date().getFullYear())
                                </script>,
                                made with <i class="fa fa-heart"></i> by
                                <a href="https://www.creative-tim.com" class="font-weight-bold" target="_blank">Creative
                                    Tim</a>
                                for a better web.
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <ul class="nav nav-footer justify-content-center justify-content-lg-end">
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com" class="nav-link text-muted"
                                        target="_blank">Creative Tim</a>
                                </li>
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com/presentation" class="nav-link text-muted"
                                        target="_blank">About Us</a>
                                </li>
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com/blog" class="nav-link text-muted"
                                        target="_blank">Blog</a>
                                </li>
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com/license" class="nav-link pe-0 text-muted"
                                        target="_blank">License</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- 页脚结束 -->
        </div>
        <!-- 主题样式内容开始 -->
        <div class="fixed-plugin">
            <a class="fixed-plugin-button text-dark position-fixed px-3 py-2">
                <i class="material-icons py-2">settings</i>
            </a>
            <div class="card shadow-lg">
                <div class="card-header pb-0 pt-3">
                    <div class="float-start">
                        <h5 class="mt-3 mb-0">嗨喽~</h5>
                        <p>配置你想要的主题.</p>
                    </div>
                    <div class="float-end mt-4">
                        <button class="btn btn-link text-dark p-0 fixed-plugin-close-button">
                            <i class="material-icons">clear</i>
                        </button>
                    </div>
                    <!-- End Toggle Button -->
                </div>
                <hr class="horizontal dark my-1">
                <div class="card-body pt-sm-3 pt-0">
                    <!-- Sidebar Backgrounds -->
                    <div>
                        <h6 class="mb-0">侧边栏聚焦</h6>
                    </div>
                    <a href="javascript:void(0)" class="switch-trigger background-color">
                        <div class="badge-colors my-2 text-start">
                            <span class="badge filter bg-gradient-primary active" data-color="primary"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-dark" data-color="dark"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-info" data-color="info"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-success" data-color="success"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-warning" data-color="warning"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-danger" data-color="danger"
                                onclick="sidebarColor(this)"></span>
                        </div>
                    </a>
                    <!-- Sidenav Type -->
                    <div class="mt-3">
                        <h6 class="mb-0">侧边栏样式</h6>
                        <p class="text-sm">选择想要的侧边栏样式</p>
                    </div>
                    <div class="d-flex">
                        <button class="btn bg-gradient-dark px-3 mb-2 active" data-class="bg-gradient-dark"
                            onclick="sidebarType(this)">暗黑</button>
                        <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-transparent"
                            onclick="sidebarType(this)">透明</button>
                        <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-white"
                            onclick="sidebarType(this)">白亮</button>
                    </div>
                    <p class="text-sm d-xl-none d-block mt-2">You can change the sidenav type just on desktop view.</p>
                    <!-- Navbar Fixed -->
                    <div class="mt-3 d-flex">
                        <h6 class="mb-0">导航栏固定</h6>
                        <div class="form-check form-switch ps-0 ms-auto my-auto">
                            <input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarFixed"
                                onclick="navbarFixed(this)">
                        </div>
                    </div>
                    <hr class="horizontal dark my-3">
                    <div class="mt-2 d-flex">
                        <h6 class="mb-0">全局主题[白/黑]</h6>
                        <div class="form-check form-switch ps-0 ms-auto my-auto">
                            <input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version"
                                onclick="darkMode(this)">
                        </div>
                    </div>
                    <hr class="horizontal dark my-sm-4">
                    <a class="btn btn-outline-dark w-100" href="">completed welcome blackwhitesite</a>
                </div>
            </div>
        </div>
        <!-- 主题样式内容结束 -->
    </div>
    {% endverbatim myblock %}
    <!--   Core JS Files   -->
    <script src="/static/assets/js/core/popper.min.js"></script>
    <script src="/static/assets/js/core/bootstrap.min.js"></script>
    <script src="/static/assets/js/plugins/perfect-scrollbar.min.js"></script>
    <script src="/static/assets/js/plugins/smooth-scrollbar.min.js"></script>

    <script src="/static/assets/js/my/jquery.js"></script>
    <script src="/static/assets/js/my/vue.min.js"></script>
    <script src="/static/assets/js/my/vue-router.js"></script>
    <script src="/static/assets/js/my/ele.index.js"></script>
    <script src="/static/js/ping.js"></script>
    <script src="/static/js/clickEmoji.js"></script>
    <script src="/static/js/cookieUtil.js"></script>


    <script>
        var win = navigator.platform.indexOf('Win') > -1;
        if (win && document.querySelector('#sidenav-scrollbar')) {
            var options = {
                damping: '0.5'
            }
            Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
        }
    </script>
    <!-- Github buttons -->
    <!-- <script async defer src="https://buttons.github.io/buttons.js"></script>
  Control Center for Material Dashboard: parallax effects, scripts for the example pages etc
  <script src="/static/assets/js/material-dashboard.min.js?v=3.0.0"></script> -->

    <script>
        new Vue({
            el: '#app',
            data: {
                nick_name: localStorage.getItem("nick_name") === null ? '_' : localStorage.getItem("nick_name"),
                user_avatar: localStorage.getItem("avatar") === null ? '_' : localStorage.getItem("avatar"),
                loading: true,
                mode: "user",
                cache_check: -2,
                searchThing_user: "",
                searchThing_article: "",
                select_mode: "文章标题",
                select_mode_user: "昵称",
                send_word: "",
                check_options: [
                    {
                        value: 0,
                        label: '待审核'
                    },
                    {
                        value: 1,
                        label: '通过'
                    }, {
                        value: -1,
                        label: '驳回'
                    }
                ],
                recommend_options: [
                    {
                        value: 0,
                        label: 'Level 0'
                    }, {
                        value: 1,
                        label: 'Level 1'
                    }, {
                        value: 2,
                        label: 'Level 3'
                    }, {
                        value: 3,
                        label: 'Level 3'
                    }, {
                        value: 4,
                        label: 'Level 4'
                    }, {
                        value: 5,
                        label: 'Level 5'
                    }, {
                        value: 6,
                        label: 'Level 6'
                    }, {
                        value: 7,
                        label: 'Level 7'
                    }, {
                        value: 8,
                        label: 'Level 8'
                    }, {
                        value: 9,
                        label: 'Level 9'
                    }, {
                        value: 10,
                        label: 'Level 10'
                    }],
                next: null,
                tableData: [],
                user_tableData: []

            },
            created() {

            },
            mounted() {
                // 动态禁用元素呗
                this.change_sign_status();
                this.load_user();
            },
            watch: {
            },
            methods: {
                // 改变控制台
                change_mode() {
                    // this.mode = this.mode === "user" ? "article" : "user";
                    // 改变模式 就重新请求
                    this.next = null;
                    if (this.mode === 'user') {
                        this.load_user()
                    } else {
                        this.load_article()
                    }
                },
                // 加载更多
                load_more() {
                    if (this.mode === 'user') {
                        this.load_user("1")
                    } else {
                        this.load_article("1")
                    }
                },
                // 所有内容
                search_something() {
                    if (this.mode ==='article') {
                        this.search_article();
                    }else{
                        this.search_user();
                    }
                },
                // 保存原有的文章状态
                cache_check_func(env, row) {
                    if (env) {
                        this.cache_check = row.is_check
                    }
                },
                // 修改文章审核状态
                check_status(row, idx) {
                    this.$prompt('请输入修改理由', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        this.$message({
                            type: 'success',
                            message: '你输入的内容是: ' + value
                        });
                        let body = `method_args=is_check&tag=${this.tableData[idx].is_check}&word=${value}&aid=${this.tableData[idx].aid}`;
                        this.change_article(body);
                        
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                        this.tableData[idx].is_check = this.cache_check;
                    });
                },
                // 修改文章推荐状态
                recommend_status(row, idx) {
                    let s = this.tableData[idx].is_recommend ? 1 : 0
                    let body = `method_args=is_recommend&tag=${s}&word=&aid=${this.tableData[idx].aid}`;
                    this.change_article(body);
                },
                // 修改文章推荐等级状态
                recommend_level(row, idx) {
                    let body = `method_args=recommend&tag=${this.tableData[idx].recommend}&word=&aid=${this.tableData[idx].aid}`;
                    this.change_article(body);
                },
                // 修改文章封面
                change_article_avatar(row, idx) {
                    let body = `method_args=head_avatar&tag=1&word=&aid=${this.tableData[idx].aid}`;
                    this.change_article(body);
                    this.tableData[idx].head_avatar = '/static/image/default.jpg'
                },
                // 修改用户状态
                user_valid(row, idx) {
                    let s = this.user_tableData[idx].is_valid ? 0 : 1
                    let body = `method_args=is_valid&tag=${s}&word=&aim_id=${this.user_tableData[idx].uid}`;
                    this.change_user(body);
                },
                // 修改用户头像
                change_user_avatar(row, idx) {
                    let body = `method_args=avatar&tag=1&word=&aim_id=${this.user_tableData[idx].uid}`;
                    this.change_user(body);
                    this.user_tableData[idx].avatar = '/static/image/default.jpg'
                },
                // 系统留言
                send_message(row, idx) {
                    this.$prompt('请输入给ta的留言', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        if (value.length < 1) {
                            this.$message({
                                type: 'info',
                                message: '你啥也没说'
                            });
                            return
                        }
                        let body = `method_args=send_message&tag=1&word=${value}&aim_id=${this.user_tableData[idx].uid}`;
                        this.change_user(body);
                        
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });
                },
                // 系统邮件
                send_email(row, idx) {
                    this.$prompt('请输入给ta的邮件留言', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        if (value.length < 2) {
                            this.$message({
                                type: 'info',
                                message: '你啥也没说 (至少3个字)'
                            });
                            return
                        }
                        let body = `method_args=send_email&tag=1&word=${value}&aim_id=${this.user_tableData[idx].uid}`;
                        this.change_user(body);
                        
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });
                },
                // 查看文章详情
                goCheckDetail(aid, mode) {
                    let url;
                    if (mode === 1 || mode === "1") {
                        url = `/pages/adminArticleBywang.html/`
                    } else {
                        url = `/pages/adminArticleByEditorMD.html/`
                    }
                    localStorage.setItem('checkAid', aid);
                    localStorage.setItem('refer', document.location.href);
                    document.location.href = url;
                },
                // 操作
                handleClick(row) {
                    console.log(row);
                },
                getArticleDetail(aid) {
                    console.log(aid);
                },
                change_sign_status() {
                    this.nick_name = localStorage.getItem("nick_name") === null ? '_' : localStorage.getItem("nick_name");
                    let self = this;
                    setTimeout(function () {
                        self.loading = false;
                    }, 300)
                },
                logout() {
                    localStorage.removeItem('token');
                    localStorage.removeItem('nick_name');
                    window.clearCookie("jwtToken");
                    this.change_sign_status();
                },
                load_user(next_ = null, url_ = null) {
                    this.loading = true;
                    let url;
                    if (next_) {
                        url = this.next;
                    } else if (url_) {
                        url = url_
                    }else {
                        url = `/apiAdmin/users/`;
                    }
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    fetch(url, {
                        method: 'GET',
                        headers: {
                            'token': token,
                            'X-CSRFToken': xCSRF
                        }
                    })
                        .then(resp => resp.json())
                        .then(json => {
                            if (json.code !== 200) {
                                this.$message({
                                    message: json.message,
                                    type: 'warning'
                                })
                            } else {
                                this.$message({
                                    message: `${json.message}`,
                                    type: 'success'
                                })
                                if (next_) {
                                    this.user_tableData = this.user_tableData.concat(json.data.results);
                                } else {
                                    this.user_tableData = json.data.results;
                                }
                                this.next = json.data.next;
                            }
                            this.loading = false;
                        })
                },
                // 查找文章作者信息
                have_user(nick_name) {
                    this.mode = 'user';
                    let url = `/apiAdmin/users/?nick_name=${nick_name}&email=&info=`;
                    this.load_user(next_=null, url_=url);
                },
                // 查找用户
                search_user() {
                    let mode_ = this.searchThing_user;
                    let url;
                    switch (this.select_mode_user) {
                        case "1":
                            url = `/apiAdmin/users/?nick_name=${mode_}&email=&info=`;
                            break;
                        case "2":
                            url = `/apiAdmin/users/?nick_name=&email=${mode_}&info=`;
                            break;
                        default:
                            url = `/apiAdmin/users/?nick_name=${mode_}&email=&info=`;
                    }
                    this.load_user(next_=null, url_=url);
                },
                // 修改文章属性
                change_user(body) {
                    const url = `/apiAdmin/users/`;
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    fetch(url, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'token': token,
                            'X-CSRFToken': xCSRF
                        },
                        body: body
                    })
                        .then(resp => resp.json())
                        .then(json => {
                            if (json.code !== 200) {
                                this.$message({
                                    message: json.message,
                                    type: 'warning'
                                })
                                this.load_user();
                            } else {
                                this.$message({
                                    message: `${json.message}`,
                                    type: 'success'
                                })
                            }
                    })
                },
                load_article(next_ = null, url_=null) {
                    this.loading = true;
                    let url;
                    if (next_) {
                        url = this.next;
                    }else if(url_) {
                        url = url_
                    } else {
                        url = `/apiAdmin/articles/?is_check_eq=&author=&title=&tag=&content_text=`;
                    }
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    fetch(url, {
                        method: 'GET',
                        headers: {
                            'token': token,
                            'X-CSRFToken': xCSRF
                        }
                    })
                        .then(resp => resp.json())
                        .then(json => {
                            if (json.code !== 200) {
                                this.$message({
                                    message: json.message,
                                    type: 'warning'
                                })
                            } else {
                                this.$message({
                                    message: `${json.message}`,
                                    type: 'success'
                                })
                                if (next_) {
                                    this.tableData = this.tableData.concat(json.data.results);
                                } else {
                                    this.tableData = json.data.results;
                                }
                                this.next = json.data.next;
                            }
                            this.loading = false;
                        })
                },
                // 查找昵称对应的文章
                have_article(nick_name){
                    this.mode = 'article';
                    let url = `/apiAdmin/articles/?is_check_eq=&author=${nick_name}&title=&tag=&content_text=`;
                    this.load_article(next_=null, url_=url);
                },
                // 查找文章
                search_article() {
                    let mode_ = this.searchThing_article;
                    let url;
                    console.log(this.select_mode);
                    switch (this.select_mode) {
                        case "1":
                            url = `/apiAdmin/articles/?is_check_eq=&author=&title=${mode_}&tag=&content_text=`;
                            break;
                        case "2":
                            url = `/apiAdmin/articles/?is_check_eq=&author=${mode_}&title=&tag=&content_text=`;
                            break;
                        case "3":
                            url = `/apiAdmin/articles/?is_check_eq=&author=&title=&tag=${mode_}&content_text=`;
                            break;
                        case "4":
                            url = `/apiAdmin/articles/?is_check_eq=&author=&title=&tag=&content_text=${mode_}`;
                            break;
                        case "5":
                            url = `/apiAdmin/articles/?is_check_eq=${mode_}&author=&title=&tag=&content_text=`;
                            break;
                        default:
                            url = `/apiAdmin/articles/?is_check_eq=&author=&title=${mode_}&tag=&content_text=`;
                    }
                    this.load_article(next_=null, url_=url);
                },
                // 修改文章属性
                change_article(body) {
                    const url = `/apiAdmin/articles/`;
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    fetch(url, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'token': token,
                            'X-CSRFToken': xCSRF
                        },
                        body: body
                    })
                        .then(resp => resp.json())
                        .then(json => {
                            if (json.code !== 200) {
                                this.$message({
                                    message: json.message,
                                    type: 'warning'
                                })
                                this.load_article();
                            } else {
                                this.$message({
                                    message: `${json.message}`,
                                    type: 'success'
                                })
                            }
                    })
                }
            }
        })
    </script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
    <script src="/static/assets/js/material-dashboard.min.js?v=3.0.0"></script>
    <script src="https://myhkw.cn/api/player/1636018876119" id="myhk" key="1636018876119" m="1"></script>

</body>

</html>